<template>
  <div class="trade-chart">
    <div class="chart" ref="myEchart"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import { addThemeListener, THEMES, getTheme } from "@/utils/theme";
export default {
  props: {
    askList: {
      type: Array,
      default() {
        return [];
      },
    },
    bidList: {
      type: Array,
      default() {
        return [];
      },
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    show(val) {
      if (val) {
        this.chart && this.chart.dispose();
        this.chart = null;
      }
    },
  },
  mounted() {
    setInterval(() => {
      this.load();
    }, 500);
    let timeout = null;
    const resizeEvt =
      "orientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(
      resizeEvt,
      () => {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          this.chart && this.chart.dispose();
          this.chart = null;
          this.load();
        }, 300);
      },
      false
    );
    addThemeListener(this.load);
  },
  methods: {
    load() {
      const deepLeft = this.bidList || [];
      const deepRight = this.askList || [];
      if (!this.show) return;
      if (!deepLeft.length && !deepRight.length) return;

      if (!this.chart) {
        this.chart = echarts.init(this.$refs.myEchart);
      }

      deepLeft.sort(function (a, b) {
        return a.price - b.price;
      });
      deepRight.sort(function (a, b) {
        return a.price - b.price;
      });
      if (deepLeft.length && deepLeft.length) {
        const leftPrice = +deepLeft[deepLeft.length - 1].price;
        const rightPrice = (deepRight.length && +deepRight[0].price) || 0;
        const midPirce = (rightPrice - leftPrice) / 2 + leftPrice;
        deepLeft.push({
          price: midPirce,
          qty: 0,
          sum: 0,
        });
        deepRight.unshift({
          price: midPirce,
          qty: 0,
          sum: 0,
        });
      }
      const deepLeftData = [];
      const deepRightData = [];
      const delegateAmountArray = [];
      deepLeft.forEach((item) => {
        const price = parseFloat(item.price);
        const amount = parseFloat(item.qty);
        const amountTotal = parseFloat(item.sum);
        deepLeftData.push([price, amountTotal]);
        deepRightData.push([]);
        delegateAmountArray.push(amount);
      });
      deepRight.forEach((item) => {
        const price = parseFloat(item.price);
        const amount = parseFloat(item.qty);
        const amountTotal = parseFloat(item.sum);
        deepLeftData.push([]);
        deepRightData.push([price, amountTotal]);
        delegateAmountArray.push(amount);
      });
      const isDark = getTheme() === THEMES.dark;
      const option = {
        animation: false,
        backgroundColor: isDark ? "#131419" : "#fff",
        tooltip: {
          trigger: "axis",
        },
        grid: {
          containLabel: false,
          left: 22,
          right: 30,
          top: 6,
          bottom: 30,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              fontSize: 12,
              textStyle: {
                color: function (value, index) {
                  return "#9a9a9a";
                },
              },
            },
            axisLine: {
              lineStyle: {
                color: "#9a9a9a",
              },
            },
            splitLine: {
              show: false,
            },
            scale: true,
          },
        ],
        yAxis: [
          {
            position: "right",
            type: "value",
            splitLine: {
              show: false,
            },
            axisLabel: {
              fontSize: 12,
              textStyle: {
                color: function (value, index) {
                  return "#9a9a9a";
                },
              },
            },
            axisLine: {
              show: true,
              onZeroAxisIndex: 1,
              lineStyle: {
                color: "#9a9a9a",
              },
            },
          },
        ],
        series: [
          {
            name: "Buy",
            data: deepLeftData,
            type: "line",
            color: "#00c076",
            showSymbol: false,
            lineStyle: {
              width: 1,
              opacity: 1.0,
            },
            label: {
              normal: {
                show: false,
              },
            },
            smooth: false,
            emphasis: {
              itemStyle: {
                color: "black",
                borderColor: "rgb(202,174,126)",
                borderWidth: "5",
              },
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: isDark
                        ? "rgba(16,181,117,1)"
                        : "rgba(16,181,117,1)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: isDark
                        ? "rgba(16,181,117,0)"
                        : "rgba(16,181,117,0)", // 0% 处的颜色
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#00c076",
                  type: "dashed",
                },
              },
            },
          },
          {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#F84960",
                  type: "dashed",
                },
              },
            },
            name: "Sell",
            data: deepRightData,
            type: "line",
            color: "#F84960",
            showSymbol: false,
            smooth: false,
            lineStyle: {
              width: 1,
              opacity: 1,
            },
            label: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              itemStyle: {
                color: isDark ? "black" : "white",
                borderColor: isDark
                  ? "rgb(202,174,126)"
                  : "rgba(255,255,255,0.5)",
                borderWidth: "5",
              },
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: isDark ? "rgba(246,70,93,1)" : "rgba(246,70,93,1)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: isDark ? "rgba(246,70,93,0)" : "rgba(246,70,93,0)", // 0% 处的颜色
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss">
.trade-chart {
  height: 100%;
  position: relative;
  .chart {
    padding-top: 30px;
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
